<template>
    <div>
        <h1>{{ name }}</h1>
        <h2>{{ age }}</h2>
        <br/>
        <button @click="sendStudentName">传递学生姓名</button>
        <button @click="sendStudentAge">传递学生年龄</button>
        <button @click="unbindSendStudentName">解绑传递学生姓名事件</button>
        <button @click="unbind">解绑自定义事件</button>
        <button v-on:click="destroyMe">销毁</button>
    </div>
</template>

<script>
import Vue from "vue";
export default Vue.extend({
    name: "MyStudent",

    data() {
        return {
            name: "马云",
            age: 59
        };
    },

    props: {},
    methods: {
        sendStudentName() {
            console.log('传递学生姓名按钮 被点击了')
            this.$emit('getStudentName',this.name)
        },
        sendStudentAge(){
            console.log('传递学生年龄按钮 被点击了')
            this.$emit('getStudentAge',this.age)
        },
        unbindSendStudentName(){
            //解绑单个自定义事件
            this.$off('getStudentName')
        },
        unbind(){
            console.log('解绑所有')
            //解绑多项自定事件
            this.$off(['getStudentName','getStudentAge'])
            //解绑所以自定义事件
            // this.$off()
        },
        destroyMe(){
            //组件销毁,所有自定义事件也都将解绑
            //组件也不再被vue所管理,所有 @click 的事件也都将不被执行
            this.$destroy()
        }
    },
    destroyed() {
        console.log("学生组件被销毁了")
    },
});
</script>

<style>
div {
    padding: 20px;
}
</style>